<template>
  <div>
    <mybutton @click.native="$refs.myDialog.visible = true">新增</mybutton>
    <my-dialog ref="myDialog" @confirm="addArticle"></my-dialog>
    <my-dialog ref="editDialog" @confirm="editItem"></my-dialog>
    <div class="container">
      <div class="title">
        <div class="item">文章ID</div>
        <div class="item">文章标题</div>
        <div class="item">文章标签</div>
        <div class="item">作者</div>
        <div class="item">操作</div>
      </div>
      <div class="content" v-for="(obj, index) in articleList" :key="index">
        <div class="item">{{ obj.id }}</div>
        <div class="item">{{ obj.title }}</div>
        <div class="item">{{ obj.label }}</div>
        <div class="item">{{ obj.author }}</div>
        <div class="item">
          <mybutton type="default" @click="showEditDialog(index)"
            >编辑</mybutton
          >
          <mybutton type="danger" @click="deleteArticle(index)">删除</mybutton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mybutton from "../lesson8/myButton.vue";
import myDialog from "./myDialog.vue";
export default {
  components: { myDialog, Mybutton },
  data() {
    return {
      articleList: [
        {
          id: "001",
          title: "习近平谈治国理政",
          label: "政治",
          author: "习近平",
          checked: false,
        },
        {
          id: "002",
          title: "明朝那些事儿",
          label: "历史",
          author: "当年明月",
          checked: false,
        },
        {
          id: "003",
          title: "Vue3.x",
          label: "计算机",
          author: "尤雨溪",
          checked: false,
        },
      ],
      searchMsg: "",
      editIndex: 0,
      allChecked: false,
    };
  },
  methods: {
    addArticle(item) {
      this.articleList.push(item);
    },
    deleteArticle(index) {
      this.articleList.splice(index, 1);
    },
    showEditDialog(index) {
      this.editIndex = index;
      this.$refs.editDialog.show(this.articleList[index]);
    },
    editItem(data) {
      for (let key in data) {
        this.articleList[this.editIndex][key] = data[key];
      }
    },
  },
};
</script>
<style scoped>
.content {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.title {
  display: flex;
  background: #f2f2f2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}

.content {
  display: flex;
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
  text-align: center;
}
.item {
  flex: 1;
  height: 50px;
  line-height: 50px;
}
</style>